<template lang="html">
     <chart
    class="x-pie"
    :chartid='chartId'
    :option = 'options'
    :title='title'
  	>
    </chart>
</template>


<script>
	import chart from './chart.vue'
  import {newline} from '../../../utils/tools'
	export default {
		  components : {
		    chart,
		  },
		  props:{
		  	  chartId :{
			      type : String,
			    },
			    title : {
			      type : String,
			    },
			    propdata : {
			      type : Object,
			    }
		  },
		  mounted(){

		  },
		  data(){
		  		return{
					options : {
            title: {
                text: 'ECharts 入门示例'
            },
            legend: {

            },
						tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
		          }
		        },
            xAxis: {
              axisLabel : {
                interval : 0,
                formatter : (value) => {
                  return newline(value,5)
                }
              },
              data: this.propdata.xAxis
            },
            yAxis: {},
            series: [{
              type: 'bar',
              label:{
              	show:true,
              	position: 'top',
              },
              itemStyle: {
              normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#83bff6'},
                          {offset: 0.5, color: '#188df0'},
                          {offset: 1, color: '#188df0'}
                      ]
                  )
              },
              emphasis: {
                  color: new this.$echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#2378f7'},
                          {offset: 0.7, color: '#2378f7'},
                          {offset: 1, color: '#83bff6'}
                      ]
                    )
                }
              },
              data: this.propdata.value
            }]
          },
  		}
	  },
      created(){

      }
	}

</script>

<style>
</style>
